/*
 * @Author: stark
 * @Date: 2022-04-12 10:46:53
 */
// 
let goodsId = $.getUrlParam('id');
$.cookie.json = true;
let userInfo = $.cookie('userInfo') ? $.cookie('userInfo') : null;
let goodsCount = 0;
// 渲染数据
$.get(baseUrl + '/goods/detail', data = { goodsId }, response => {
    let result = response.data;
    $(".sku_name").html(result.goodsName);
    $(".news").html(result.goodsSn);
    $(".summary_price del").html(result.marketPrice);
    $(".price").html(result.shopPrice);
    let html = ''
    result.goodsImg.forEach((item, index) => {
        html += `
                        <li class="${index == 1 ? 'current' : ''}">
                            <img src="${item.goodsThumb}" alt="">
                        </li>
                        `
    })
    $(".bigImg").prop('src', result.goodsImg[0].goodsImg);
    $(".goodsImg").prop('src', result.goodsImg[0].goodsImg);
    $(".list_item").html(html);
})

$(function () {
    // 切换图片
    $(".list_item").on('click', 'li', function () {

        $(this).addClass('current').siblings().removeClass('current');
        $(".preview_img>img").prop('src', $(this).find("img").prop("src"));
        $(".bigImg").prop('src', $(this).find("img").prop("src"));
    })

    // 数量增加
    let num = 0;
    $(".add").on('click', function () {

        $(this).siblings(".reduce").prop("disabled", "");
        num++;
        $(this).siblings('.choose_amount_number').val(`${num}`);
        goodsCount = $(".choose_amount_number").val();
    })
    // 数量减少
    $(".reduce").on('click', function () {
        if (num == 2) {
            $(this).prop("disabled", "disabled");
        }
        num--;
        $(this).siblings('.choose_amount_number').val(num);
        goodsCount = $(".choose_amount_number").val();
    })


    // 点击购物车
    // let goodsCount = $(".choose_amount_number").val();
    // console.log(goodsCount);

    $(".addcar").on('click', () => {
        goodsCount = $(".choose_amount_number").val()
        if (userInfo) {
            $.post(baseUrl + '/cart/add', { userId: userInfo.id, goodsId, goodsCount }, response => {
                location.href = `car.html`
            })
        } else {
            let userCarts = localStorage.getItem('userCarts') ? JSON.parse(localStorage.getItem('userCarts')) : {};
            if (userCarts[goodsId]) {
                userCarts[goodsId] += parseInt(goodsCount);
            } else {
                userCarts[goodsId] = goodsCount;
            }
            localStorage.setItem('userCarts', JSON.stringify(userCarts));

            location.href = 'login.html'
        }
    })
})

// 放大镜功能
window.addEventListener('load', function () {
    // 鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子功能
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');

    // 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和big大盒子
    preview_img.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    })

    preview_img.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    // 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走
    preview_img.addEventListener('mousemove', function (e) {
        // (1). 先计算出鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x, y);
        // (2). 减去盒子高度300的一半 是150 就是我们mask的最终left和top值了
        // (3). 我们mask 移动的距离
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // (4). 如果x坐标小于了0 就让他停到0的位置
        // 遮挡层的最大移动距离
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMax) {
            maskX = maskMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMax) {
            maskY = maskMax;

        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';

        // 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        // 大图
        var bigImg = document.querySelector('.bigImg');
        // 大图片最大移动距离
        var bigMax = bigImg.offsetWidth - big.offsetWidth;
        // 大图片的移动距离 X Y
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;

        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    })

})